
<template>
    <div class="dialog-container" :style="[{display: status ? 'block' : 'none'}]">
        <div class="loading-mask"></div>
        <div class="sk-wave my-loading">
            <div class="sk-rect sk-rect1"></div>
            <div class="sk-rect sk-rect2"></div>
            <div class="sk-rect sk-rect3"></div>
            <div class="sk-rect sk-rect4"></div>
            <div class="sk-rect sk-rect5"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'myLoading',
        props: ['status']
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";
    @import "../../node_modules/spinkit/scss/spinners/3-wave";

    .loading-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: $black;
        opacity: 0.6;
        z-index: 9999;
    }

    .my-loading {
        width: 60px;
        height: 60px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -30px;
        margin-top: -30px;
        z-index: 9999;
    }

    .sk-wave .sk-rect {
        background-color: $white;
    }

</style>
















